{%- macro main_menu(data,hierarchy,root) %}
    <ul class="clearfix">
    {% for key, value in hierarchy %}
        <li{% if data[key]['hr'] is defined %} class="hr"{% endif %}>
            <a{% if key != value %} class="has-son"{% endif %} href="{{ url(data[key]['href']) }}">
                {% if data[key]['attach']['icon'] is defined AND data[key]['attach']['icon'] %}
                    <i class="{{ data[key]['attach']['icon'] }}"></i>
                {% endif %}
                {{ data[key]['name'] }}
            </a>
            {% if key != value %}
                    {{ main_menu(data,value,false) }}
            {% endif %}
        </li>
    {% endfor %}
    </ul>
{%- endmacro %}
<nav id="main-nav">
    <ul class="nav nav-pills cd-primary-nav">
        {% for key, value in hierarchy %}
            <li{% if key != value %} class="has-dropdown" data-content="{{ key }}"{% endif %}>
                <a href="{{ url(data[key]['href']) }}">
                    {% if data[key]['attach']['icon'] is defined AND data[key]['attach']['icon'] %}
                        <i class="{{ data[key]['attach']['icon'] }}"></i>
                    {% endif %}
                    {{ data[key]['name'] }}
                    {% if key != value %}
                        <i class="fa {% if root === true %}fa-angle-down{% else %}fa-arrow-circle-right{% endif %}"></i>
                    {% endif %}
                </a>
            </li>
        {% endfor %}
    </ul>
</nav>

<div class="morph-dropdown-wrapper">
    <div class="dropdown-list">
        <ul>
            {% for key, value in hierarchy %}
                {% if key != value %}
                    <li id="{{ key }}" class="dropdown links">
                        <div class="content">
                            {{ main_menu(data,value,true) }}
                        </div>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
        <div class="bg-layer" aria-hidden="true"></div>
    </div>
</div>